<template>
    <div class="table-toolbar">
        <el-button v-for="tool in tools" :icon="tool.icon" :type="tool['btn-type']" @click="toolHandlClick(tool)" :key="tool.key">{{tool['btn-name']}}</el-button>
        <el-input
                v-if="showSearch"
                :placeholder="searchPh"
                icon="search"
                v-model="searchKey"
                @change="handleSearchClick"
                :on-icon-click="handleSearchClick">
        </el-input>
    </div>
</template>
<script>
    export default {
      props: ['tools', 'showSearch', 'searchPlaceholder'],
      data () {
        return {
          searchKey: '',
          searchPh: this.searchPlaceholder || '关键字'
        }
      },
      methods: {
        toolHandlClick (tool) {
          this.$emit('tool-click', tool)
        },
        handleSearchClick () {
          this.$emit('on-search', this.searchKey)
        }
      }
    }
</script>
<style scoped>
    .table-toolbar{
        text-align: right;
        margin-bottom: 10px;
    }
    .el-input{
        width: 250px;
    }
</style>